說到前端、Web不外乎就會提到三巨頭HTML、CSS和JavaScript（JS），先跳脫專有名詞我們來發揮想像力，解釋這三種語言是如何彼此配合？

假設你在台北地下街有一個空白的廣告看板，HTML讓你可以刊登想呈現的文字或是圖片，但這樣也太單調了吧！於是我們請來CSS，幫我們在廣告看板上塗點顏色、妝點那些文字…
這時候！JS偵測到了有路人正在靠近我們的廣告，並且馬上把內容換成臉貼在玻璃上的恐怖女鬼！
…（原來我們是負責萬聖節活動的公關公司啊）

在上述腦洞大開的內容中，可以觀察到：

• HTML（超文本標記語言）：負責呈現內容
• CSS（層疊樣式表）：負責描述外觀
• JS：負責動態互動的功能

那些你在網頁上看到的「好酷」、「能互動」的效果就是由JS幫我們做到的，那它是怎麼做的呢？

在這個介面上，我們有一個按鈕元素，當點擊它的時候畫面上會跳出「Hello World ! Today is 2024/09/16」：

<button id="btnTest">點一下</button>

<script>
    let btn = document.getElementById("btnTest");
    function showStr() {
      var year = 2024;
      var month = "09";
      var day = "16";
      alert("Hello World ! Today is "+year+"/"+month+"/"+day);
    };
    btn.onclick = function () { showStr() };
</script>

解析JS內的程式碼：
1.在第一行我們透過id這個屬性找到了目標button物件，並把它指定在btn這個自定義的變數中
2.接著寫了一個showStr()函式，內部宣告了字串和數值型別的變數，透過alert()動作把完整字串呈現在畫面上（而完整字串仰賴了連接符號+幫忙拼湊而成）
3.最後將showStr()函式，指定給btn的onclick事件

也可以使用監聽的方式：

btn.addEventListener("click", function () {
    var year = 2024;
    var month = "09";
    var day = "16";
    alert("Hello World ! Today is " + year + "/" + month + "/" + day);
});

對JS有了非常基礎的概念後，就可以重複運用變數、函式…甚至條件，讓JS幫我們做出越來越多複雜的動作，在功能性越強的情況下除了程式碼雜亂也會降低網頁效能，函式庫和前端框架的出現便是開發者的好幫手。

接下來，就有請Vue.js來為我們上課。

參考資料
MDN Web Docs